<template>
  <div class="CartItem">
      <div v-for="item in $store.state.cartList" class="listItem">

              <div class="button"
               :class="{checked:item.ischecked}"
               @click="checkClick"
               ><img src="@/assets/img/cart/tick.svg" alt=""></div>
              <div class="itemImg"><img :src="item.img" alt=""></div>
              <div class="text">
                <p class="title">{{item.title}}</p>
                <p class="desc">{{item.desc}}</p>
                <p class="pc"><span class="price" >￥{{item.realPrice}}</span>
                <span class="count">x{{item.count}}</span></p>
             </div>
     </div>
  </div>
</template>

<script>

  export default {
    name:'CartItem',
  //  props:{
  // ischeacked:{
  //   typeof:Boolean,
  //   default:false
  // }
  //  }


// computed:{
//   total(){
//      let sum=0
//     for(item in $store.state.cartList)
//        if(this.ischeacked)
//         sum+=item.realPrice
//         return sum

//   }
// },
 methods:{
 checkClick(){

  for(item in this.$store.state.cartList)
     item.ischecked=false


 }

}
  }

</script>

<style scoped>
.CartItem{
border-bottom: 2px solid rgb(212, 212, 212);
position: relative;
}
.listItem{
display: flex;
position: relative;
}
.itemImg{
margin-left: 16px;
}
.itemImg img{
 height: 100px;
 width: 80px;
 border-radius: 10px;
 padding: 5px;

}
.text{
overflow: hidden;
}

.title{
color: rgb(32, 32, 32);
font-size: 18px;
  padding-bottom: 10px;
   overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-top: 5px;
}
.desc{
font-size: 13px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-bottom: 18px;
}
.price{
 font-size: 18px;
 color: #ee525a;
}
.count{
position: absolute;
bottom: 0px;
right: 20px;
}
.pc{
position: relative;
}
.button{
position: absolute;
height: 20px;
width: 20px;
border-radius: 50%;
border: 1px solid gray;
left: px;
top: 43px;
}
.checked{
background-color: rgb(230, 8, 8);

}


</style>
